<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h2>1.绑定监听</h2>
  <button @click="test1()">test1</button>
  <button @click="test2('mask')">test2</button>
  <button @click="test3">test3</button>
  <button @click="test4(123,$event)">test4</button>

  <h2>2.事件修饰符</h2>
  <div style="width: 200px;height: 200px;background:red;" @click="test5">
    <div style="width: 100px;height: 100px;background:blue;" @click.stop="test6"></div>
  </div>

  <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

  <h2>3.按键修饰符</h2>
  <input type="text" @keyup.enter="test8">
  <input type="text" @keyup.13="test8">

</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript">
  //@click.stop 停止事件冒泡
  //@click.prevent 阻止事件的默认行为

  const vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
      test1 () {
        alert("test1");
      },
      test2(msg){
        alert(msg);
      },
      test3 (event) {
        alert(event.target.innerHTML);
      },
      test4(number,event){
        alert(number + "--"+event.target.innerHTML);
      },
      test5 () {
        alert("out");
      },
      test6 (event) {
        // event.stopPropagation()
        alert("inner");
      },
      test7 () {
        alert("点击了");
      },
      test8 (event) {
        // if (event.keyCode === 13){
          alert(event.target.value + " " + event.keyCode);
        // }
      }
    }
  })
</script>
</body>
</html>